<template>
  <div class="home-container">
    <van-nav-bar fixed placeholder>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button icon="search" type="primary" round @click="$router.push('/search')">搜索</van-button>
      </template>
    </van-nav-bar>

    <!-- tab导航模块 -->
    <van-tabs  v-model="active" @click="tabClick">
      <van-tab v-for="item in channels" :key="item.is" :title='item.name '>
        <!-- 下拉刷新 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <!-- 上拉刷新 -->
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :title="item.title"
              :key="item.art_id"
              @click="$router.push({path:'/article',query:{id:item.art_id}})"
            >
              <template #label>
                <div>
                  <van-grid :column-num="item.cover.type">
                    <van-grid-item  v-for="(value,index) in item.cover.images" :key="index">
                      <van-image :src="value"  lazy-load/>
                      </van-grid-item>
                   </van-grid>
                  <div>
                    <span>{{item.aut_name}}</span> &nbsp;
                    <span>{{item.comm_count}}</span> &nbsp;
                    <span>{{item.pubdate|fromNow}}</span>
                  </div>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {getChannelList,getArticleList} from './home.js'
import { mapState } from 'vuex'
import moment from 'moment'
moment.locale('zh-cn'); 
export default {
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      isLoading: false,
      channels:[],
      timestamp:null,
      active:0
    }
  },
 async created(){
   let res=await getChannelList()
   console.log(res);
   this.channels=res.data.data.channels
  },
  methods: {
   async onLoad () {
      // 异步更新数据
      if(!this.timestamp){
        this.timestamp=Date.now()
      }
      let res=await getArticleList({
        channel_id:this.channels[this.active].id,
        timestamp:this.timestamp
      })

      this.timestamp=res.data.data.pre_timestamp
      this.list.push(...res.data.data.results)
      console.log(res);
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
    
        

        // 加载状态结束
        this.loading = false

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true
        }
   
    },
    onRefresh () {
      this.list = []
      this.finished = false
      this.onLoad()
      this.loading = true
      this.loading = true
      this.isLoading = false
    },
    tabClick(){
     this. onRefresh()
    }
  },
  filters:{
    fromNow(value){
      return moment(value).fromNow();
    }
  }
}
</script>

<style lang="less">
.home-container {
  .van-nav-bar{
    z-index: 99;
  }
  .van-nav-bar__content {
    background-color: #0098fa;
    .logo {
      background: url('~@/assets/logo.png') no-repeat;
      background-size: cover;
      width: 100px;
      height: 40px;
    }
    .van-nav-bar__right {
      .van-button {
        background-color: #1dadfb;
        width: 100px;
        height: 40px;
        border: 1px solid transparent;
      }
      .van-icon {
        color: #fff;
      }
    }
  }
  .van-tabs__wrap {
    position: fixed;
    top: 46px;
    width: 100%;
    z-index: 99;
  }
  .van-tabs__content {
    margin-top: 44px;
  }
}
</style>
